<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入elementUI样式-->
    <link rel="stylesheet" href="../element-ui-2.13.0/lib/theme-chalk/index.css">
    <!--导入vue js文件-->
    <script src="../vue/vue-v2.6.10.js"></script>
    <script src="../vue/axios-0.18.0.js"></script>
    <!--导入elementUI js文件-->
    <script src="../element-ui-2.13.0/lib/index.js"></script>

</head>

<body>
<div id="app">

    <!-- 查看 -->
    <!--<div >
        <p>厂站：{{ruleForm.stationName}}</p>
        <p>类型：{{ruleForm.type}}</p>
        <p>状态：{{ruleForm.status}}</p>
        <el-table
                :data="ruleForm.value"
                style="width: 70%">
            <el-table-column
                    prop="time"
                    label="日期">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="内容">
            </el-table-column>
        </el-table>

    </div>-->

    <!-- 创建和编辑 -->
    <!--<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" v-else>-->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
        <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="事件状态" prop="status">
                    <el-select v-model="ruleForm.status" placeholder="请选择活动区域">
                        <el-option label="未完成" value="1"></el-option>
                        <el-option label="已完成" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-button type="primary" @click="handleAdd()" style="margin-left:55px">添加内容</el-button>
        </el-row>
        <el-row v-for="(item,index) in ruleForm.contentList" :gutter="20">
            <!-- <el-date-picker type="datetime" placeholder="选择日期" v-model="date1" style="width: 100%;"></el-date-picker> -->
            <el-col :span="0"  >
                <el-form-item label="记录人" :prop="'value.' + index + '.recorder'" :key=index :rules="{
                        required: true, message: '请输入内容', trigger: 'blur'
                      }" >
                    <el-input v-model="item.recorder" placeholder="请输入内容" ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="类型" :prop="'value.' + index + '.type'" :key=index :rules="{
                        required: true, message: '请选择类型', trigger: 'blur'
                      }" >
                    <el-select v-model="item.type" placeholder="请选择类型">
                        <el-option label="异常缺陷" value="0"></el-option>
                        <el-option label="计划检修" value="1"></el-option>
                        <el-option label="临时检修" value="2"></el-option>
                        <el-option label="调到命令" value="3"></el-option>
                        <el-option label="非计划检修" value="4"></el-option>
                        <el-option label="故障跳闸" value="5"></el-option>
                        <el-option label="省调通知" value="6"></el-option>
                        <el-option label="领导指示" value="7"></el-option>
                        <el-option label="机组启停" value="8"></el-option>
                        <el-option label="其他" value="9"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="厂站" :prop="'value.' + index + '.stationName'" :key=index :rules="{
                        required: true, message: '请输入内容', trigger: 'blur'
                      }" >
                    <el-input v-model="item.stationName" placeholder="请输入内容" ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="14">
                <el-form-item label="时间" :prop="'value.' + index + '.createTime'" :key=index :rules="{
                        required: true, message: '请输入时间', trigger: 'blur'
                      }">
                    <el-date-picker v-model="item.createTime" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="内容" :prop="'value.' + index + '.content'" :key=index :rules="{
                        required: true, message: '请输入内容', trigger: 'blur'
                      }">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 20}"
                            placeholder="请输入内容"
                            v-model="item.content">
                    </el-input>
                </el-form-item>
            </el-col>
            </el-col :span='2'>
            <el-button type="danger" @click='handleDel(index)'>删除</el-button>
            </el-col>

        </el-row>

        <!-- 提交 -->
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>

    </el-form>


</div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            username: "",
            date1: '',
            flag: 'create', // 编辑或查看  create创建 edit编辑 detail查看
            journalId: null,
            ruleForm: {
                recorder: '',
                stationName: '',
                type: '',
                status: '',
                contentList: [
                    /*{createTime: '', content: 'lc'}*/
                    /*{createTime: '', content: 'lc'},*/
                ]
            },
            rules: {
                stationName: [
                    {required: true, message: '请输入厂站名称', trigger: 'blur'},
                ],
                type: [
                    {required: true, message: '请选择类型', trigger: 'change'}
                ],
                status: [
                    {required: true, message: '请选择状态', trigger: 'change'}
                ],
            },
            backend_url: "http://localhost:8081"

        },
        created() {
            axios.get(this.backend_url + "/getUsername").then((res) => {
                if (res.data.flag) {

                    this.username = res.data.data
                }
            })
            //console.log('luyou===', window.location.href)
            if (window.location.search) {
                this.journalId = window.location.href.split('?')[1].split('=')[1];
                //console.log("journalId=========" + this.journalId);
                axios.get(this.backend_url + "/findOneById?journalId=" + this.journalId).then((res) => {
                    this.ruleForm = res.data.data
                    //console.log("ruleForm======="+this.ruleForm)
                })

            } else {
                console.log(9999)
            }
        },
        methods: {

            submitForm(formName) {

                axios.post(this.backend_url + "/update", this.ruleForm).then((res) => {

                    if (res.data.flag) {
                        this.$message({
                            message: res.data.message,
                            type: "success"
                        });
                        window.location.href = window.location.origin + '/operationLog.html'

                    }

                })

                /*this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });*/
            },
            resetForm(formName) {
                window.location.href = window.location.origin + '/operationLog.html'
            },
            // 添加
            handleAdd() {

                console.log("handleAdd方法进来了")
                this.ruleForm.contentList.push({
                    recorder: this.username,
                    createTime: '',
                    content: ''
                });
            },
            // 删除
            handleDel(index) {

                //点击删除按钮，弹出提示窗口
                this.$confirm('确定要删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.ruleForm.contentList.splice(index, 1);
                }).catch(() => {
                    //2.点击取消，什么都不做
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            }
        }


    });
</script>
<style>
    .grid-content {
        border: 1px solid #ccc;
        height: 30px;
        margin-bottom: 10px;
    }
</style>

</html>